In this step, you will create a new Visual Studio application, add the appropriate references for the project, and add XAML markup to create the C1Barcode control.
- Create a new Windows Store application:
- Select File | New | Project. The New Project dialog box will open.
- Select Store Apps in the Templates list under Visual C#. From the templates list, select Blank App (Universal Apps).
- Give your application a Name and select OK. Your new application will open.
- Right-click the References folder in the Solution Explorer and select Add | New Reference. Locate and add the following references:
- C1.Xaml.dll
- C1.Xaml.BarCode.dll
- Right-click the Resources folder and select Add | Existing Item. The Add Existing Item dialog box will open.
- Locate an image file you would like to add to your application.
- Select the file and click OK. The file will be added to the Resources folder.
- Rebuild the application so that your file is available to your application.
- Open the MainPage.xaml file and locate the opening <Page> tag. This tag will include the necessary namespaces. Edit the tag so that it resembles the following markup:
XAML |
Copy Code
|
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:V12015BarcodeTest2"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:c1="using:C1.Xaml.BarCode" xmlns:Xaml="using:C1.Xaml"
xmlns:BarCode="using:C1.BarCode"
x:Class="V12015BarcodeTest2.MainPage"
mc:Ignorable="d">
|
The following namespaces are added to the tag:
- xmlns:c1="using:C1.Xaml.BarCode"
- xmlns:Xaml="using:C1.Xaml"
- xmlns:BarCode="using:C1.BarCode"
- Place your cursor between the <Grid></Grid> tags on the page. Add the following XAML markup between the <Grid></Grid> tags to set up the Grid's resources and row definitions:
XAML |
Copy Code
|
<Grid.Resources>
<Style TargetType="TextBlock">
<Setter Property="FontSize" Value="26.667"></Setter>
</Style>
<Style TargetType="TextBox">
<Setter Property="FontSize" Value="26.667"></Setter>
</Style>
<Style TargetType="ComboBox">
<Setter Property="FontSize" Value="26.667"></Setter>
</Style>
</Grid.Resources>
<Border HorizontalAlignment="Center">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="20*"/>
<RowDefinition Height="20*" />
<RowDefinition Height="60*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20*" />
<ColumnDefinition Width="80*" />
</Grid.ColumnDefinitions>
|
- The following markup adds four TextBlock controls and one ComboBox control. When you run your application, you will be able to change the type of BarCode control being displayed:
XAML |
Copy Code
|
<TextBlock Text="CodeType:" VerticalAlignment="Center"></TextBlock>
<ComboBox x:Name="cbCodeType" HorizontalAlignment="Left" Grid.Column="1"
Width="414"
Height="50"
SelectionChanged="cbCodeType_SelectionChanged" />
<TextBlock Text="Text:" Grid.Row="1" VerticalAlignment="Center"></TextBlock>
<TextBox x:Name="text" Text="{Binding Text, ElementName=barcode, UpdateSourceTrigger=PropertyChanged, FallbackValue='', Mode=TwoWay}"
HorizontalAlignment="Left" Grid.Column="1" Grid.Row="1" Height="50" Width="414" TextChanged="text_TextChanged"/>
<TextBlock Text="BarCode:" Grid.Row="2" VerticalAlignment="Center"/>
<Grid Grid.Row="2" Grid.Column="1" Background="White" HorizontalAlignment="Left" Width="414">
|
- Add the markup for the C1BarCode control below the last Grid tag. This markup will set up the type of BarCode the application will display when you run it:
XAML |
Copy Code
|
<c1:C1BarCode x:Name="barcode" AutoSize="False" BarHeight="0" CodeType="QRCode" CaptionPosition="Below" Text="http://www.componentone.com" Height="200" Width="200">
<c1:C1BarCode.QRCodeOptions>
<BarCode:QRCodeOptions ErrorLevel="H" />
</c1:C1BarCode.QRCodeOptions>
<c1:C1BarCode.ModuleSize>
<BarCode:ModuleSize BarNarrow="0" BarWide="0" />
</c1:C1BarCode.ModuleSize>
</c1:C1BarCode>
|
- The last section of XAML needed adds the image file you added in step 3:
XAML |
Copy Code
|
<Image Source="ms-appx:/V12015BarcodeTest2.Windows/Resources/c1logo.png"
x:Name="image" Width="70" Height="70" />
|
You have completed Step 1 of this Quick Start. In this step, you created a new application, added references, and used XAML markup to set up your application. In the next step, you will add code to your application.
See Also